<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位和绝对定位</title>
		<!-- 定位，元素正确布局
		 1浮动定位：左右布局
		 2相对定位：微调布局针对单一元素
		  position：relative； 声明元素进行相对定位
		  特点：相对与父级进行定位，不脱离文档流
		  附加属性：方向属性：left，top，right，bottom
		  属性值：正负值px
		         叠加属性：z-index：数值，数值越大，越靠前
				 
		 3绝对定位：
		 position：absolute；声明元素进行绝对定位
		 特点：相对于祖先【页面左上顶角】进行定位，
		       如果有父元素，按照父元素【左上顶角】，
		 使用方法：通常与相对定位搭配使用
		 4固定定位：fixed 页面区域固定在页面上
		           相对，绝对，固定属性--附加属性全部通用：方向，叠加属性
		 5文档流定位：按照元素分类进行定位：块与块 纵排
		                                 行与行 横排
										 块与行 横排
		 -->
		 <style>
			 /* box1和box2 300*300 背景颜色 加相对定位 */
			 div{
				 width: 300px;
				 height: 300px;
			 }
			 div.box1{
				 background: url(img/maomao.jpg);
				 background: #00ffff;
				 /* 相对定位，相对就近父级 */
				 position: absolute;
				 left; 280px;
				 top:50px;
				 /* 叠加属性 */
				 z-index: 100;
			 }
			 div.box2{
				 background: url(img/coser.png);
				 background: #55aa7f;
				 position: relative;
				 left; 333px;
				 top:-216px;
				 z-index: 1;
			 }
		 </style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>